Day 140 (Week20), 2021/08/29 (Sunday)

學習時數:4 hr

Done

  • [done] w17 hw2 餐廳網頁功能製作(抽獎編輯頁面)

To Do @ this week

  • [ ]   w17 & w18 餐廳網頁改寫

學習心得紀錄

Objective 客觀

抽獎品項的編輯、刪除

花了有點多時間在想怎麼做後台管理,把大致上弄好之後才作編輯跟刪除功能,在編輯這部分,卡在 ejs 想要加上 URL query string 中 id 的值,但是中間一直出錯,以為是跟在 controllers 一樣,使用 req.params.id,後來查了一資料,發現是 req.query,但是還沒有搞懂為什麼 ejs 看不懂 req.query.id,後來在 ./index.js 設了 ejs 都可以使用的 res.localsreq.query.id 存在 res.locals.id 裡面,後來就可以順利取得 query 上的 id 值。

抽獎品項的編輯頁面

從昨天到今天一直在想要怎麼把他從單個品項的編輯頁面(跟先前跳轉到某一條留言編輯頁面類似),改成條列全部獎品品項並可以編輯其中一個品項。
後來還想說利用 DOM,在點擊「編輯」時刪除該行,然後新增該行可以編輯的 <input> 的編輯表格,但後來左思右想有點難實行,還順道複習了 DOM 的語法XD,後來想到另一個方法:就讓編輯時導到編輯頁面,然後將想要編輯的部分,改成可以編輯的 HTML tag。

感受

想的頭有點痛!不過很開心做出來上面那個圖!
不過我把這個拿給我姐看...他說有點不美觀,我跟他說先做出功能 Q口Q~

Decisional 決定行動

其實這個主要功能都做出來了,但還是有些地方需要小修...,但已經把餐廳網頁做了一週了,明天就是 21 週,看來是要先擱置一旁了,希望可以在看了 React 累了之餘可以把這個還有 18 週的也補上。








你可能感興趣的文章

Build a dApp on Flow in 30 minutes

Build a dApp on Flow in 30 minutes

The introduction and difference between class component and function component in React

The introduction and difference between class component and function component in React

陣列方法

陣列方法






留言討論